<template>
  <div class="components-retention">
    <!-- header部分 -->
    <div class="new-page-title">
      <!-- 左边 -->
      <div class="title-left">
        <p class="line" />
        <span class="text">{{ $t('dataAnalysis.customerRetentionAnalysis') }}</span>
      </div>
      <!-- 右边 -->
      <div class="new-page-title-right">
        <div class="title-right">
          <div class="time-left">
            <el-select
              v-model="rangeValue"
              style="margin-right: 10px;"
              placeholder="请选择"
              @change="setDateRange(rangeValue)"
            >
              <el-option
                v-for="item in rangeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="time-right">
            <span
              v-if="rangeValue === 4 || rangeValue === 2 || rangeValue === 3"
              class="title-time"
            >{{ dateRange[0] }}{{ $t('date.tip') }}{{ dateRange[1] }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- /header部分 -->

    <!-- 选择展示信息 -->
    <div class="type">
      <el-tabs
        v-model="retainType"
        type="card"
      >
        <el-tab-pane
          :label="$t('dataAnalysis.browseRetention')"
          name="1"
        />
        <el-tab-pane
          :label="$t('dataAnalysis.dealRetention')"
          name="2"
        />
      </el-tabs>
      <div class="right-time">
        <el-button
          type="primary"
          @click="refreshRetainedData()"
        >
          {{ $t('dataAnalysis.clearCache') }}
          <el-popover
            placement="top"
            width="300"
            trigger="hover"
            style="margin-left: 5px;"
            :content="$t('dataAnalysis.clearCacheTip')"
          >
            <template #reference>
              <el-icon><QuestionFilled /></el-icon>
            </template>
          </el-popover>
        </el-button>
      </div>
    </div>
    <!-- /选择展示信息 -->

    <!-- 表格 -->
    <div class="three-chart five-chart">
      <el-table
        border
        :data="dataList"
        header-cell-class-name="table-header"
        row-class-name="table-row-row"
        style="width: 100%"
      >
        <el-table-column
          v-if="retainType===2"
          fixed
          prop="currentMonth"
          :label="$t('dataAnalysis.dealTime')"
          width="180"
        />
        <el-table-column
          v-if="retainType===2"
          prop="newCustomers"
          :label="$t('dataAnalysis.numberOfNewCustomersTraded')"
          width="180"
        />
        <el-table-column
          v-if="retainType===1"
          fixed
          prop="currentMonth"
          :label="$t('dataAnalysis.accessTime')"
          width="180"
        />
        <el-table-column
          v-if="retainType===1"
          prop="newCustomers"
          :label="$t('dataAnalysis.newCustomer')"
          width="180"
        />

        <el-table-column
          v-if="1<=colLength"
          :label="$t('dataAnalysis.retained1')"
        >
          <template #default="scope">
            <div>
              <p>{{ scope.row.firstMonthRemain }}</p>
              <p v-if="scope.row.firstMonthRemainRate !== null">
                {{ scope.row.firstMonthRemainRate }}%
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="2<=colLength"
          :label="$t('dataAnalysis.retained2')"
        >
          <template #default="scope">
            <div>
              <p>{{ scope.row.secondMonthRemain }}</p>
              <p v-if="scope.row.secondMonthRemainRate !== null">
                {{ scope.row.secondMonthRemainRate }}%
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="3<=colLength"
          :label="$t('dataAnalysis.retained3')"
        >
          <template #default="scope">
            <div>
              <p>{{ scope.row.thirdMonthRemain }}</p>
              <p v-if="scope.row.thirdMonthRemain !== null">
                {{ scope.row.thirdMonthRemainRate }}%
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="4<=colLength"
          :label="$t('dataAnalysis.retained4')"
        >
          <template #default="scope">
            <div>
              <p>{{ scope.row.fourthMonthRemain }}</p>
              <p v-if="scope.row.fourthMonthRemain !== null">
                {{ scope.row.fourthMonthRemainRate }}%
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="5<=colLength"
          :label="$t('dataAnalysis.retained5')"
        >
          <template #default="scope">
            <div>
              <p>{{ scope.row.fifthMonthRemain }}</p>
              <p v-if="scope.row.fifthMonthRemain !== null">
                {{ scope.row.fifthMonthRemainRate }}%
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="6<=colLength"
          :label="$t('dataAnalysis.retained6')"
        >
          <template #default="scope">
            <div>
              <p>{{ scope.row.sixthMonthRemain }}</p>
              <p v-if="scope.row.sixthMonthRemainRate !== null">
                {{ scope.row.sixthMonthRemainRate }}%
              </p>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- /表格 -->
  </div>
</template>

<script setup>
import moment from 'moment'
import { ElMessage } from 'element-plus'
// 时间范围
const rangeOptions = [
  {
    label: $t('dataAnalysis.last90D'),
    value: 2
  },
  {
    label: $t('dataAnalysis.last180D'),
    value: 3
  },
  {
    label: $t('dataAnalysis.last365D'),
    value: 4
  }
]
const dateRange = ref([])
const rangeValue = ref(2) // 1最近1个月 2最近3个月 3最近6个月 4最近1年
const retainType = ref('2') // 1访问留存  2成交留
watch(() => [retainType.value, rangeValue.value], () => {
  getRetentionData()
})
const dataList = ref([])
const colLength = ref(0)
onMounted(() => {
  setDateRange(rangeValue.value)
  getRetentionData()
})

const setDateRange = (val) => {
  let startDay = null
  let endDay = null
  if (val === 2) {
    startDay = -90
    endDay = 0
  }
  if (val === 3) {
    startDay = -180
    endDay = 0
  }
  if (val === 4) {
    startDay = -365
    endDay = 0
  }
  // 开始时间
  const startTime = moment().add(startDay, 'days').format('L')
  // 结束时间
  const endTime = moment().add(endDay, 'days').format('L')
  dateRange.value = [startTime, endTime]
}

/**
 *获取 成交留存数据
 */
const typeValue = 1 // 1月留存 2周留存 暂时不统计周留存

const getRetentionData = () => {
  if (rangeValue.value === 1) {
    colLength.value = 1
  } else if (rangeValue.value === 2) {
    colLength.value = 2
  } else if (rangeValue.value === 3) {
    colLength.value = 5
  } else if (rangeValue.value === 4) {
    colLength.value = 6
  }
  http({
    url: http.adornUrl('/admin/customerAnalysis/getCustomerRetained'),
    method: 'get',
    params: http.adornParams({
      dateType: rangeValue.value, // 1最近1个月 2最近3个月 3最近6个月 4最近1年
      retainType: retainType.value, // 1访问留存  2成交留存
      dateRetainType: typeValue, // 1月留存 2周留存 暂时不统计周留存
      startTime: dateRange.value[0] + ' 00:00:00', // yyyy-MM-dd HH:mm:ss
      endTime: dateRange.value[1] + ' 23:59:59' // yyyy-MM-dd HH:mm:ss
    })
  }).then(({ data }) => {
    if (data) {
      dataList.value = data
    } else {
      dataList.value = []
    }
  })
}

// 刷新缓存数据
const refreshRetainedData = () => {
  http({
    url: http.adornUrl('/admin/customerAnalysis/refreshRetainedData'),
    method: 'get',
    params: http.adornParams({}),
    timeout: 1000 * 60 * 10
  }).then(() => {
    ElMessage({
      message: $t('remindPop.success'),
      type: 'success',
      duration: 1000
    })
    getRetentionData()
  })
}

</script>

<style lang="scss" scoped>
.components-retention {

  /* /header部分内容 */

  /* 选择展示信息 */
  .type {
    position: relative;
  }

  .type .right-time {
    position: absolute;
    top: 0;
    right: 16px;
  }
  .new-page-title  {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .new-page-title-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .title-right {
    display: flex;
    align-items: center;
    .title-time {
      padding-right: 0;
    }
  }
  .title-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}

</style>
